<template>
	<view class="content">
		<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
		<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
			left-icon="left" left-text="返回" 
			:title="option.navBar.title" 
			:titleRightIcon="option.navBar.center.right.icon"
			:titleRightIcon2="option.navBar.center.right2.icon"
			@clickLeft="onNavBarLeftClick"
			@onClickTitleRightIcon="onClickTitleRightIcon"
			@onClickTitleRightIcon2="onClickTitleRightIcon2">
		</uni-nav-bar>
		<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" :refresher-enabled="refresherEnabled"
			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
			:style="{'height':(scrollViewHeight+'px')}">
			<view class="flex-column" v-if="detail || items.length > 0" :style="{'min-height': (scrollViewHeight + 'px')}">
				
			</view>
			<c-status-view @onStatusClick="onStatusClick" v-if="contentStatus.value"></c-status-view>
			<uni-load-more :status="loadMoreStatus" :icon-size="16" v-if="detail || items.length > 0"
				:content-text="loadMoreViewContentText" />
		</scroll-view>
		<view class="com-v-bottom-btn-parent">
			<c-button-1 :ui="bottomBtnUI" @onClick="onBottomBtnClick"></c-button-1>
		</view>
	</view>
</template>

<script>
	import MSC from './../../utils/mishang_constant.js'
	import constant from './../../utils/constant.js'
	import util from './../../utils/util.js'
	export default {
		data() {
			let option = {
				navBar: JSON.parse(JSON.stringify(constant.navBar))
			}
			option.navBar.title = "标题"
			return {
				option: option,
				navBarHeight: 0,
				scrollViewHeight: 1000,
				refresherEnabled: true,
				refresherTriggered: false,
				loadMoreViewContentText: {
					contentnomore: "到底啦~"
				},
				loadMoreStatus: 'noMore',
				page: 1,
				total_page: 1,
				loadMoreStatus: null,
				contentStatus: {},
				items: [],
				channel: "ongoning",
				firstRequest: true,
				bottomBtnPaddingBottom: "",
				detail: {
				},
				btnText: "下一步",
			}
		},
		onLoad(option) {
			var systemInfo = uni.getSystemInfoSync();
			//scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度）
			this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
					.statusBarHeight + this.$refs.navBar.height) -
				(systemInfo.safeAreaInsets.bottom) -
				84 / getApp().globalData.pxToRpxScale;
			this.bottomBtnPaddingBottom = systemInfo.safeAreaInsets.bottom + "px"
			this.init(option);
		},
		onShow() {
			if (!this.firstRequest && this.page == 1) {
				this.refreshFlag = true;
				this.request();
			}
		},
		methods: {
			init(option) {
				this.refresh();
			},
			onNavBarLeftClick() {
				util.navigateBack();
			},
			onClickTitleRightIcon() {
				console.log("click...");
			},
			onClickTitleRightIcon2() {
				console.log("click...");
			},
			onEmptyClick() {
				this.onRefresh();
			},
			onBottomBtnClick() {
				uni.navigateTo({
					url: ""
				})
			},
			onItemClick(item) {
				uni.navigateTo({
					url: ""
				})
			},
			onStatusClick() {
				this.refresh();
			},
			refresh() {
				let _this = this;
				setTimeout(() => {
					_this.refreshFlag = true;
					_this.refresherTriggered = true;
				}, 35);
			},
			onRefresh(e) {
				this.refresherTriggered = true;
				this.page = 1;
				this.total_page = 1;
				this.loadMoreStatus = constant.LOAD_STATUS.noMore;
				this.request();
			},
			onLoadMore(e) {
				if (constant.LOAD_STATUS.noMore == this.loadMoreStatus) {
					return;
				}
				this.loadMoreStatus = constant.LOAD_STATUS.loading;
				this.page++;
				this.request();
			},
			request() {
				this.page = this.page > this.total_page ? this.total_page : this.page;
				let url = "";
				if (!url) {
					let _this = this;
					setTimeout(() => {
						_this.refresherTriggered = false;
						_this.contentStatus = constant.CONTENT_STATUS.EMPTY;
					}, 300);
					return;
				}
				let param = {
					channel: this.channel,
					page: this.page
				};
				let option = {
					isNeedShowLoading: false
				};
				util.request(url, param, option, {
					success: this.requestSuccess,
					fail: this.requestFail,
					complete: this.requestComplete
				});
			},
			requestSuccess(res) {
				if (res.data.code > 0) {
					this.contentStatus == this.items.length == 0 ? constant.CONTENT_STATUS.ERROR : null;
					return;
				}
				let data = res.data.data;
				let list = data.list;
				try {
					this.total_page = util.calTotalPage(data.total_list);
				} catch (e) {
					this.total_page = 1;
					console.log(e);
				}
				if (this.refresherTriggered || this.items.length == 0) {
					this.items = list;
					this.loadMoreStatus = this.total_page == 1 ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more;
				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
					if (list.length > 0) {
						this.items = this.items.concat(list);
					}
					this.loadMoreStatus = this.page >= this.total_page ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS
						.more;
				}
				this.contentStatus = this.items.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
			},
			requestFail(res, status) {
				this.contentStatus = status;
			},
			requestComplete() {
				if (this.refresherTriggered) {
					this.refresherTriggered = false;
					if (this.total_page > 1) {
						this.loadMoreStatus = constant.LOAD_STATUS.more;
					}
				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
					if (this.page > this.total_page) {
						this.loadMoreStatus = constant.LOAD_STATUS.noMore;
						this.page = this.total_page
					} else {
						this.loadMoreStatus = constant.LOAD_STATUS.more;
					}
				}
				this.refreshFlag = false
				this.firstRequest = false
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image-fashion-logo {
		width: 136rpx;
	}
</style>
